<template>
  <div id="curriculum">
    <!--课程-->
    <div v-for="(item,index) in list" class="curriculum-c" v-if="item.childList.length!=0">
      <div class="curriculum-top">
        <img :src="item.icon" alt="">
        <span>{{item.title}}</span>
        <div></div>
        <span @click="toPath(item.toPath)">查看更多</span>
        <i class="el-icon-arrow-right" @click="toPath(item.toPath)"></i>
      </div>
      <!--课程列表-->
      <div class="curriculum-cc" @click="toPath1(item.pathInfo,item1.id)" v-for="(item1,index1) in item.childList" :key="index1" :style="{marginRight:(index1+1)%5==0?'0':'20px'}">
        <img src="@/assets/images/home/tu2.png" alt="" v-if="item1.fileUrl == null">
        <img :src="$store.state.prefixImg + item1.fileUrl" alt="" v-else>
        <div class="curriculum-tit ccsl">{{item1.courseName || item1.liveName}}</div>
        <div class="curriculum-bottom">
          <div class="jifen">
            <img src="@/assets/images/home/integral.png" alt="">
            <span>{{item1.integral}}积分</span>
          </div>
          <div class="llrs">
            <img src="@/assets/images/home/renshu.png" alt="">
            <span>{{item1.pageViews}}</span>
          </div>
          <span class="keshi" v-if="item.title != '正在直播'">{{item1.period}}课时</span>
          <span class="shijian1" v-if="item.title != '正在直播'">{{item1.uploadTime}}</span>
          <span class="keshi" v-else>{{item1.liveD}}</span>
          <span class="shijian1" v-else>{{item1.liveTime}}</span>
          <div class="btn">立即观看</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {queryCourseList,liveSelectLiveList} from '@/request/api'
  export default {
    name: 'curriculum',
    data () {
      return {
        list: [
          {title: '正在直播',toPath:'series',pathInfo:'itIsLive',icon:require('@/assets/images/home/live.png'),childList:[]},
          {title: '推荐课程',toPath:'learningCommunity',pathInfo:'seriesInfo',icon:require('@/assets/images/home/curriculum.png'),childList:[]},
          {title: '热点专题',toPath:'informationService',pathInfo:'seriesInfo',icon:require('@/assets/images/home/simulation.png'),childList:[]},
        ]
      }
    },
    created() {
        this.getList1()
        this.getList2()
        this.getList3()
    },
    methods: {
//        获取列表
      getList1() {
//          直播
        const parameter = {
          _search: true,
          "bgTm": "",
          "endTm": "",
          pageSize: 5,
          pageNumber: 1,
          "liveName": "",
          "liveTeacherName": "",
          "liveType": "正在直播",
          type: 0,//上下架状态
        }
        liveSelectLiveList(parameter).then(res=> {
          if(res.code == 200) {
            this.list[0].childList = res.data.records
            if(this.list[0].childList.length!=0) {
              this.list[0].childList.forEach(e=>{
                e.liveD = e.liveTime.split(' ')[0]
                e.liveTime = e.liveTime.split(' ')[1]
              })
            }
          }else {}
        }).catch(() => {})
      },
      getList2() {
//          推荐课程
        const parameter = {
          _search: true,
          "bgTm": "",
          "courseName": '',
          "courseType": 2,
          "endTm": "",
          pageSize: 5,
          pageNumber: 1,
          type: 0,//上下架状态
        }
        queryCourseList(parameter).then(res=> {
          if(res.code == 200) {
            this.list[1].childList = res.data.records
            if(this.list[1].childList.length!=0) {
              this.list[1].childList.forEach(e=>{
                e.uploadTime = e.uploadTime.split(' ')[0]
              })
            }
          }else {}
        }).catch(() => {})
      },
      getList3() {
//          专题课程
        const parameter = {
          _search: true,
          "bgTm": "",
          "courseName": '',
          "courseType": 1,
          "endTm": "",
          pageSize: 5,
          pageNumber: 1,
          type: 0,//上下架状态
        }
        queryCourseList(parameter).then(res=> {
          if(res.code == 200) {
            this.list[2].childList = res.data.records
            if(this.list[2].childList.length!=0) {
              this.list[2].childList.forEach(e=>{
                e.uploadTime = e.uploadTime.split(' ')[0]
              })
            }
          }else {}
        }).catch(() => {})
      },
      toPath(path) {
        this.$router.push({
          name:path
        })
      },
      toPath1(path,id) {
        this.$router.push({
          name:path,
          params: {
              id: id
          }
        })
      }
    }
  }
</script>

<style scoped>
  #curriculum {
    box-sizing: border-box;
  }
  .curriculum-c {
    box-sizing: border-box;
  }
  .curriculum-top {
    border-bottom: 1px solid #ccc;
    font-weight: 700;
    font-size: 20px;
    height: 42px;
    line-height: 34px;
    padding-left: 44px;
    position: relative;
    color: #343434;
    margin-bottom: 40px;
  }
  .curriculum-top img {
    position: absolute;
    left: 0;
    top:2px;
  }
  .curriculum-top :nth-child(3) {
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 140px;
    height: 2px;
    background: #22944E;
  }
  .curriculum-top :nth-child(4) {
    position: absolute;
    right: 30px;
    font-size: 16px;
    font-weight: 400;
    color: #9A9A9A;
  }
  .curriculum-top i {
    position: absolute;
    right: 0;
    top:6px;
  }
</style>
